<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信公众号同步助手 - Manifest V3 测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .test-section {
            background: #f5f5f5;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
        }
        .success {
            color: #28a745;
            font-weight: bold;
        }
        .error {
            color: #dc3545;
            font-weight: bold;
        }
        .warning {
            color: #ffc107;
            font-weight: bold;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        #results {
            background: white;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>微信公众号同步助手 - Manifest V3 兼容性测试</h1>
    
    <div class="test-section">
        <h2>测试项目</h2>
        <p>这个页面用于测试扩展的 Manifest V3 兼容性</p>
        
        <button onclick="testBackgroundConnection()">测试后台连接</button>
        <button onclick="testStorage()">测试存储功能</button>
        <button onclick="testMessagePassing()">测试消息传递</button>
        <button onclick="testPopupLoading()">测试弹窗加载</button>
        <button onclick="clearResults()">清除结果</button>
    </div>

    <div class="test-section">
        <h2>测试结果</h2>
        <div id="results">等待测试...</div>
    </div>

    <div class="test-section">
        <h2>Manifest V3 主要变更</h2>
        <ul>
            <li>✅ <strong>Service Worker:</strong> 使用 Service Worker 替代 Background Page</li>
            <li>✅ <strong>消息传递:</strong> 使用 chrome.runtime.sendMessage 替代直接访问</li>
            <li>✅ <strong>Action API:</strong> 使用 chrome.action 替代 chrome.browserAction</li>
            <li>✅ <strong>Host Permissions:</strong> 分离 host_permissions 和 permissions</li>
            <li>✅ <strong>Web Accessible Resources:</strong> 更新资源配置格式</li>
        </ul>
    </div>

    <script>
        function log(message, type = 'info') {
            const results = document.getElementById('results');
            const timestamp = new Date().toLocaleTimeString();
            const className = type === 'success' ? 'success' : type === 'error' ? 'error' : type === 'warning' ? 'warning' : '';
            results.innerHTML += `<span class="${className}">[${timestamp}] ${message}</span>\n`;
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '测试结果已清除\n';
        }

        async function testBackgroundConnection() {
            log('正在测试后台连接...', 'info');
            try {
                // 测试 ping 消息
                const response = await chrome.runtime.sendMessage({ action: 'ping' });
                if (response && response.success) {
                    log('✅ 后台连接成功: ' + response.message, 'success');
                } else {
                    log('❌ 后台连接失败: 无效的响应', 'error');
                }
            } catch (error) {
                log('❌ 后台连接失败: ' + error.message, 'error');
            }
        }

        async function testStorage() {
            log('正在测试存储功能...', 'info');
            try {
                // 测试设置和获取存储
                const testKey = 'test_manifest_v3_' + Date.now();
                const testValue = { test: true, timestamp: Date.now() };
                
                await chrome.storage.local.set({ [testKey]: testValue });
                const result = await chrome.storage.local.get([testKey]);
                
                if (result[testKey] && result[testKey].test === true) {
                    log('✅ 存储功能正常', 'success');
                    // 清理测试数据
                    await chrome.storage.local.remove([testKey]);
                } else {
                    log('❌ 存储功能异常', 'error');
                }
            } catch (error) {
                log('❌ 存储测试失败: ' + error.message, 'error');
            }
        }

        async function testMessagePassing() {
            log('正在测试消息传递功能...', 'info');
            try {
                // 测试获取账户列表
                const response = await chrome.runtime.sendMessage({ action: 'getAccounts' });
                if (response && Array.isArray(response.accounts)) {
                    log('✅ 消息传递成功，账户数量: ' + response.accounts.length, 'success');
                } else {
                    log('⚠️ 消息传递响应异常', 'warning');
                }
            } catch (error) {
                log('❌ 消息传递失败: ' + error.message, 'error');
            }
        }

        async function testPopupLoading() {
            log('正在测试弹窗加载...', 'info');
            try {
                // 创建 iframe 来加载 popup
                const iframe = document.createElement('iframe');
                iframe.style.width = '400px';
                iframe.style.height = '600px';
                iframe.style.border = '1px solid #ccc';
                iframe.src = 'dist/popup.html';
                
                iframe.onload = () => {
                    log('✅ 弹窗页面加载成功', 'success');
                };
                
                iframe.onerror = () => {
                    log('❌ 弹窗页面加载失败', 'error');
                };
                
                document.body.appendChild(iframe);
                
                // 5秒后移除 iframe
                setTimeout(() => {
                    if (iframe.parentNode) {
                        iframe.parentNode.removeChild(iframe);
                    }
                }, 5000);
                
            } catch (error) {
                log('❌ 弹窗测试失败: ' + error.message, 'error');
            }
        }

        // 页面加载完成后自动运行基础测试
        window.addEventListener('load', () => {
            log('页面加载完成，开始基础测试...', 'info');
            setTimeout(() => {
                testBackgroundConnection();
            }, 1000);
        });
    </script>
</body>
</html>